<template>
  <view class="page">
    <CommonNavbar title="个人信息"></CommonNavbar>
    <view class="main">
      <up-form
        labelWidth="200rpx"
        labelPosition="left"
        :model="state.teacherInfo"
        :rules="state.rules"
        errorType="toast"
        ref="uFormRef"
      >
        <up-form-item
          label="姓名"
          prop="nickname"
        >
          <up-input
            v-model="state.teacherInfo.nickname"
            placeholder="请输入姓名"
            border="none"
            inputAlign="right"
          ></up-input>
        </up-form-item>
        <up-form-item
          label="学校名称"
          prop="schoolName"
        >
          <up-input
            v-model="state.teacherInfo.schoolName"
            placeholder="请输入学校名称"
            border="none"
            inputAlign="right"
          ></up-input>
        </up-form-item>
        <up-form-item
          label="学科"
          prop="subjects"
        >
          <up-input
            v-model="state.teacherInfo.subjects"
            placeholder="请选择学科"
            border="none"
            inputAlign="right"
          ></up-input>
        </up-form-item>
      </up-form>
    </view>
    <view class="footer">
      <up-button
        type="primary"
        text="完成"
        @click="submit"
        :loading="state.isLoading"
      ></up-button>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { regTecherApi } from '@/api/api';
import { getUserInfoApi } from '@/api/me';
import { setUserInfo } from '@/utils/auth';
const uFormRef = ref(null);
const state = reactive({
  teacherInfo: {
    nickname: '',
    schoolName: '',
    subjects: ''
  },
  isLoading: false,
  rules: {
    nickname: {
      required: true,
      message: '请输入姓名',
      trigger: 'blur'
    },
    schoolName: {
      required: true,
      message: '请输入学校名称',
      trigger: 'blur'
    },
    subjects: {
      required: true,
      message: '请输入学科',
      trigger: 'blur'
    }
  }
});
const submit = () => {
  uFormRef.value.validate().then(async (valid) => {
    if (valid) {
      state.isLoading = true;
      const params = {
        ...state.teacherInfo
      };
      const result = await regTecherApi(params);
      if (result.code === 200) {
        state.isLoading = false;
        uni.showToast({
          title: '注册成功',
          icon: 'success'
        });
        getUserInfo();
      } else {
        state.isLoading = false;
        uni.$u.toast(result.msg);
      }
    }
  });
};
const getUserInfo = async () => {
  const result = await getUserInfoApi();
  if (result.code === 200) {
    setUserInfo('userInfo', result.data);
    uni.switchTab({
      url: '/pages/index/index'
    });
  }
};
</script>

<style></style>
